<template>
    <div class="updatePwd-container">
        <!-- 面包屑 -->
        <Breadcrumb>
            <BreadcrumbItem to="/userHome">个人中心</BreadcrumbItem>
            <BreadcrumbItem>修改密码</BreadcrumbItem>
        </Breadcrumb>
        <!-- 修改密码区域 -->
        <div class="updatePwd-info">
            <b-row align-h="center">
                  <b-col cols="12" sm="12" md="6" lg="6">
                      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                          <FormItem prop="credential">
                              <Input type="password" v-model="formValidate.credential" placeholder="请输入原密码" />
                          </FormItem>
                          <FormItem prop="newCredential">
                              <Input type="password" v-model="formValidate.newCredential" placeholder="请输入新密码" />
                          </FormItem>
                          <FormItem prop="confirm">
                              <Input type="password" v-model="formValidate.confirm" placeholder="请再次确认密码" />
                          </FormItem>
                          <FormItem>
                              <Button type="primary" @click="updateCredential('formValidate')" long>确认</Button>
                          </FormItem>
                      </Form>
                  </b-col>
            </b-row>
        </div>
    </div>
</template>

<script>
export default {
  name: 'updatePwd',
  data () {
    const validateCredential = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('原密码不能为空哦'))
      }
      // 模拟异步验证效果（判断原密码是否正确）
      setTimeout(() => {
        this.$axios({
          url: 'userLoginAuths/findPwdByUserId',
          method: 'get',
          params: {
            uId: JSON.parse(localStorage.getItem('user')).uId,
            credential: this.formValidate.credential
          },
          headers: {
            Authorization: localStorage.getItem('token')
          }
        }).then(res => {
          if (res.data === true) {
            callback()
          } else {
            callback(new Error('原密码不正确'))
          }
        })
      }, 1000)
    }
    const validateNewCredential = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        if (this.formValidate.newCredential !== '') {
          // 对第二个密码框单独验证
          this.$refs.formValidate.validateField('confirm')
        }
        callback()
      }
    }
    const validateConfirm = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.formValidate.newCredential) {
        callback(new Error('两次密码不匹配'))
      } else {
        callback()
      }
    }

    return {
      // 识别标识密码验证
      formValidate: {
        credential: '',
        newCredential: '',
        confirm: ''
      },
      ruleValidate: {
        credential: [
          { validator: validateCredential, trigger: 'blur' }
        ],
        newCredential: [
          { validator: validateNewCredential, trigger: 'blur' }
        ],
        confirm: [
          { validator: validateConfirm, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 修改密码凭证
    updateCredential (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios({
            url: 'userLoginAuths/updateCredential',
            method: 'get',
            params: {
              ulaUid: JSON.parse(localStorage.getItem('user')).uId,
              ulaCredential: this.formValidate.newCredential
            }
          }).then(res => {
            if (res.data.code === 200) {
              // 跳回登录页面
              this.$router.push({ path: '/login' })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.updatePwd-info {
  margin-top: 60px;
  min-height: 400px;
}
</style>
